<template>
  <div>
    <el-breadcrumb separator-class='el-icon-arrow-right'>
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter='20'>
        <el-col :span='4'>
          <el-button type='primary' @click="drawer = true;drawerInit()">添加权限</el-button>
        </el-col>
      </el-row>
      <el-table :data='rightsList' border stripe row-key='mid'
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column label='##' type='index'></el-table-column>
        <el-table-column label='权限名称' prop='name'></el-table-column>
        <el-table-column label='权限图标' prop='icon'>
          <template slot-scope='scope'>
            <i :class="scope.row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column label='权限排序' prop='sort'></el-table-column>
        <el-table-column label='路径' prop='site'></el-table-column>
        <el-table-column label='权限等级' prop='level'>
          <template slot-scope='scope'>
            <el-tag v-if='scope.row.type === 1'>菜单</el-tag>
            <el-tag v-else-if='scope.row.type === 2' type='success'>API</el-tag>
            <el-tag v-else-if='scope.row.type === 3' type='warning'>按钮API</el-tag>
            <el-tag v-else type='danger'>未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column label='修改'>
          <template slot-scope='scope'>
            <el-button type="primary" icon="el-icon-edit" @click='menu = scope.row;drawer=true' circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click='delMenu(scope.row)'></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--    权限操作 开始-->
    <el-drawer
      size='50%'
      :visible.sync='drawer'
      direction='rtl'>
      <div>
        <el-row :gutter="20">
          <el-col :span="12" :offset="2">
            <div class="grid-content bg-purple">
              <h2 v-if='menu.mid > 0'>权限修改</h2>
              <h2 v-else>权限添加</h2>
              <el-form ref="menuFormRuleRef" :rules="menuFormRules"  :model="menu" label-width="80px">
                <el-form-item label="权限等级">
                  <div class="block">
                    <el-cascader v-model='drawermenuid'
                                 placeholder='不选默认为一级'
                                 :emitPath="false"
                                 :options="rightsList"
                                 :props="{ checkStrictly: true,value:'mid',label:'name' }"
                                 clearable>
                    </el-cascader>
                  </div>
                </el-form-item>
                <el-form-item label="权限名称">
                  <el-input v-model="menu.name"></el-input>
                </el-form-item>
                <el-form-item label="权限类型">
                  <el-select v-model="menu.type" placeholder="权限类型">
                    <el-option label="菜单" :value='1'></el-option>
                    <el-option label="API" :value=2></el-option>
                    <el-option label="按钮API" :value=3></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="权限地址">
                  <el-input v-model="menu.site" ></el-input>
                </el-form-item>
                <el-form-item label="权限排序">
                  <el-input v-model="menu.sort"></el-input>
                </el-form-item>
                <el-form-item label="权限图标">
                  <el-input v-model="menu.icon">
                    <i slot="prepend" :class="menu.icon"></i>
                    <el-button slot="append" icon="el-icon-search" onclick='window.open("https://element.eleme.cn/#/zh-CN/component/icon")'></el-button>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-button v-if='menu.mid > 0' type="primary" @click="onUpdata" >修改</el-button>
                  <el-button v-else type="primary" @click="onSubmit">立即创建</el-button>
                  <el-button @click="drawer=false">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
    <!--    权限操作 结束-->

  </div>
</template>

<script>
export default {
  data () {
    return {
      rightsList: [],
      drawer: false,
      drawermenuid: [],
      menu: {
        sid: 0,
        name: '',
        type: 1,
        site: '#',
        sort: 66,
        icon: 'el-icon-edit'
      },
      // 验证menu
      menuFormRules: {
        name: [
          { required: true, message: '请输入权限名称', trigger: 'blur' },
          { min: 1, max: 7, message: '长度在 1 到 7 个字符', trigger: 'blur' }
        ],
        site: [
          { required: true, message: '请输入权限地址,没有写 #', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取权限列表
    async getRightsList () {
      const { data: res } = await this.$http.get('Menu/menus')
      if (res.code !== 1000) return this.$message.error(res.msg)
      this.rightsList = res.data
    },
    // 设置当前节点
    setMenuSid () {
      console.log('设置当前节点')
      // 设置
      this.menu.sid = this.drawermenuid.length > 0 ? this.drawermenuid[this.drawermenuid.length - 1] : 0
    },
    // 提交添加
    async onSubmit () {
      console.log(this.menu)
      // 设置一下上级ID
      this.setMenuSid()
      this.$refs.menuFormRuleRef.validate(async valid => {
        console.log(valid)
        if (!valid) return false
        // 提交
        const { data: res } = await this.$http.post('Menu/addmenu', this.menu)
        console.log(res)
        if (res.code !== 1000) {
          this.$message.error(res.msg)
        } else {
          this.$message.success('保存成功')
          this.drawer = false
          this.drawerInit()
          this.getRightsList()
        }
      })
    },
    // 信息更新
    async onUpdata () {
      console.log(this.menu)
      // 设置一下上级ID
      this.setMenuSid()
      this.$refs.menuFormRuleRef.validate(async valid => {
        console.log(valid)
        if (!valid) return false
        // 提交
        const { data: res } = await this.$http.post('Menu/upmenu', this.menu)
        console.log(res)
        if (res.code !== 1000) {
          this.$message.error(res.msg)
        } else {
          this.$message.success('保存成功')
          this.drawer = false
          this.drawerInit()
          this.getRightsList()
        }
      })
    },
    // 删除节点
    async delMenu (data) {
      const confirmResult = await this.$confirm('此操作将删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(msg => {
        return msg
      }).catch(err => {
        return err
      })

      if (confirmResult !== 'confirm') {
        return this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }

      const { data: res } = await this.$http.post('Menu/delMenu', data)
      if (res.code !== 1000) {
        this.$message.error(res.msg)
      } else {
        this.$message.success(res.msg)
        this.getRightsList()
      }
    },
    // 初始化数据
    drawerInit () {
      console.log('初始化数据')
      this.menu = {
        sid: 0,
        name: '',
        type: 1,
        site: '#',
        sort: 66,
        icon: 'el-icon-edit'
      }
    },
    // 递归查询当前祖辈关系关系
    async getFatherId (mid) {
      const { data: res } = await this.$http.post('Menu/getfather', { mid: mid })
      if (res.code !== 1000) return this.$message.error(res.msg)
      this.drawermenuid = res.data
    }
  },
  created () {
    this.getRightsList()
  },
  watch: {
    // 检测数据变化 显示联动惨淡
    menu: function (data) {
      if (data.sid !== 0) {
        this.getFatherId(data.sid)
      } else {
        this.drawermenuid = []
      }
    }
  }
}
</script>

<style lang='less' scoped>
.el-table {
  margin: 12px;
  font-size: 12px;
}
.el-drawer >div{
  padding: 30px;
}
.el-drawer > .el-form{
  margin: 12px;
}

focus {
  outline: 0;
}
</style>
